/**
 * methods
 * 向组件实例添加方法
 */

// import { createApp } from 'vue'

// var app = createApp({
//   data() {
//     return {
//       title: `This is a TITLE`
//     }
//   },
//   template: `
//      <h1>{{ title }}</h1>
//      <h2>{{ yourTitle() }}</h2>
//      <h3>{{ myTitle }}</h3>
//      <button @click="changeTitle('This is your title')">CHANGE TITLE</button>
//    `,
//   methods: {
//     /**
//      * 1. Vue 创建实例时，会自动为 methods 绑定当前实例 this
//      *    保证在事件监听时，回调始终指向当前组件实例
//      *    方法要避免使用箭头函数，箭头函数会阻止Vue正确绑定组件实例 this
//      */

//     /**
//      * @click="changeTitle('This is your title')"
//      *
//      * 函数名 + () 不是执行符号，而是传入实参的容器
//      *
//      * 等价于
//      * onclick = "() => { changeTitle('This is your title') }"
//      *
//      */
//     changeTitle(title) {
//       this.title = title
//     },
//     /**
//      *
//      * 模版直接调用的方法尽量避免副作用操作
//      *
//      *
//      */
//     yourTitle() {
//       return 'This is your title'
//     },
//     myTitle() {
//       return this.title
//     }
//   }
// })

// const vm = app.mount('#app')

// 实例中直接挂载 methods 中的每一个方法

// console.log(vm)

// lodash 常用的JS工具库

// import { createApp } from 'vue'
// import lodash from 'loadsh'
// import axios from 'axios'

// const List = {
//   data() {
//     return {
//       teachers: []
//     }
//   },
//   template: `
//     <div>
//       <table border="1">
//         <thead>
//           <tr>
//             <td>ID</td>
//             <td>姓名</td>
//             <td>学科</td>
//           </tr>
//         </thead>
//         <tbody v-if="teachers.length > 0">
//           <tr v-for="item in teachers" :key="item.id">
//             <td>{{ item.id }}</td>
//             <td>{{ item.name }}</td>
//             <td>{{ item.subject }}</td>
//           </tr>
//         </tbody>
//         <tbody v-else>
//           <tr>
//             <td colspan="3">暂无数据</td>
//           </tr>
//         </tbody>
//       </table>
//       <button @click="debounceGetData">GET Teacher's Data</button>
//     </div>
//   `,
//   created () {
//     this.debounceGetData = lodash.debounce(this.getData, 1000)
//   },
//   unmounted () {
//     this.debounceGetData.cancel();
//   },
//   methods: {
//      async getData () {
//       console.log(1)
//       const result = await axios('http://localhost:8080/getTeacher')
//       this.teachers = result.data
//       console.log(this.teachers)
//      }
//   }
// }

// createApp(List).mount('#app')



var Vue = (function () {

  function Vue(options) {
    this.$data = options.data()
    this._methods = options.methods;

    this._init(this)
  }

  Vue.prototype._init = function (vm) {
    initData(vm)
    initMethods(vm)
  }

  function initData(vm) {
    for(var key in vm.$data) {
      (function (k) {
        Object.defineProperty(vm, key, {
          get () {
            return vm.$data[k]
          },
          set(newVal) {
            vm.$data[k] = newVal
          }
        })
      }(key))
    }
  }

  function initMethods(vm) {
    for(var key in vm._methods) {
      (function (k) {
        vm[k] = vm._methods[k]
      }(key))
    }
  }

  return Vue
}())


const vm = new Vue({
  data () {
    return {
      a: 1,
      b: 2
    }
  },
  methods: {
    increaseA (num) {
      this.a += num
    },
    increaseB (num) {
      this.b += num
    },
    getTotal() {
      console.log(this.a + this.b)
    }
  }
})

vm.increaseA(1)
vm.increaseA(1)
vm.increaseA(1)
vm.increaseA(1)



vm.increaseB(2)
vm.increaseB(2)
vm.increaseB(2)
vm.increaseB(2)


vm.getTotal()

console.log(vm)

